<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>单项数据流：父组件中数据的变化会向下传递给子组件，但是这个变化是单向下行的。子组件不能向上传给父</p>
        <p>{{msg3}}</p>
        <button @click="changeArr">修改数组</button>
        <hr>
        <com
            :info1="msg1"
            :info2="msg2"
            :info3="msg3"
        ></com>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: { 
                msg1: '666',
                msg2: 10086,
                msg3: [1,2,3,4]
            },
            methods: {
                changeArr() {
                    this.msg3.push(5)
                }
            },
            components: {
                'com': {
                    template: 
                    `
                        <div>
                            <p>第1条数据：{{info1}}</p>
                            <p>第2条数据：{{myInfo2}}</p>
                            <p>第3条数据：{{info3}}</p>
                            <button @click="change">换号了！</button>
                        </div>
                    `,
                    // props通过属性名传值
                    props: {
                        info1: String,
                        info2: [String, Number],
                        info3: [Array]
                    },
                    data() {
                        return {
                            myInfo2: this.info2
                        }
                    },
                    methods: {
                        change() {
                            // 如果一定要改传进来的数据，可以在data中声明一个新的变量，接受数据后，修改这个新的变量
                            this.myInfo2 = 10000;
                            this.info3.push(5)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>